<template>
  <div class="app-container">
    <div style="margin-bottom: 18px">
      <el-button
        type="primary"
        size="small"
        @click="handleClick({}, 'add')"
      >添加</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      element-loading-text="加载中"
      :data="list"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index +1 }}
        </template>
      </el-table-column>
      <el-table-column label="广告名称" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.advertNo }}
        </template>
      </el-table-column>
      <el-table-column label="类型" width="100" align="center">
        <template slot-scope="scope">
          <!-- {{ scope.row.advertType }} -->
          <div v-if="scope.row.advertType === 0">普通广告</div>
          <div v-if="scope.row.advertType === 1">轮播图</div>
        </template>
      </el-table-column>
      <el-table-column label="链接地址" align="center">
        <template slot-scope="scope">
          {{ scope.row.url }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="170">
        <template slot-scope="scope">
          <i v-if="scope.row.advertTime" class="el-icon-time" />
          <span> {{ scope.row.advertTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="70">
        <template slot-scope="scope">
          <el-tag v-if="!scope.row.del" type="success">启用</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleClick(scope.row, 'detail')"
          >查看</el-button>
          <el-button
            size="mini"
            type="warning"
            @click="handleClick(scope.row, 'edit')"
          >编辑</el-button>
          <el-button
            v-if="scope.row.del"
            size="mini"
            type="success"
            @click="handleClick(scope.row, 'start')"
          >启用</el-button>
          <el-button
            v-else
            size="mini"
            type="danger"
            @click="handleClick(scope.row, 'start')"
          >停用</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 详情 -->
    <AdvertDetail ref="detail" :form="detailFrom" />
    <!-- 编辑 -->
    <AdvertEdit
      v-if="adType"
      ref="edit"
      :form="detailFrom"
      :adverttype="adType"
      @sonSay="fetchData"
    />
    <AdvertAdd
      v-if="adType"
      ref="add"
      :adverttype="adType"
      @sonSay="fetchData"
    />
  </div>
</template>

<script>
import { getList, getDetail, advertDel, advertStart } from '@/api/advert'
import { getadType } from '@/api/enumeration'
import AdvertDetail from './advertDetail.vue'
import AdvertEdit from './advertEdit.vue'
import AdvertAdd from './advertAdd.vue'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  components: {
    AdvertDetail,
    AdvertEdit,
    AdvertAdd
  },
  data() {
    return {
      list: null,
      listLoading: true,
      detailFrom: {},
      adType: [],
      currentPage: 1,
      total: 9,
      pageSize: 10
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取表格数据
    fetchData() {
      // debugger
      // console.log('路由模式', process.env.port)
      this.listLoading = true
      const val = {
        page: (this.currentPage - 1), size: this.pageSize
      }
      getList(val).then((res) => {
        this.list = res.res.content
        this.total = res.res.totalElements
        this.currentPage = res.res.number + 1
        this.pageSize = res.res.size
        this.listLoading = false
      })
      getadType().then((res) => {
        // console.log(res)
        this.adType = res.res
      })
    },

    handleClick(data, type) {
      switch (type) {
        case 'detail':
          this.getdetail(data.id)
          break
        case 'edit':
          this.advertEdit(data)
          break
        case 'del':
          this.advertDel(data.id)
          break
        case 'start':
          this.advertStart(data.id)
          break
        case 'add':
          this.advertAdd()
          break
        default:
          break
      }
    },
    // 获取详情
    getdetail(id) {
      getDetail(id).then((res) => {
        if (res.code === 9999) {
          // console.log(res)
          this.detailFrom = res.res
          // console.log('sss', this.$refs)
          this.$refs.detail.idDetail = true
          // this.idDetail = true
        }
      })
    },
    // 编辑单条广告
    advertEdit(data) {
      getDetail(data.id).then((res) => {
        if (res.code === 9999) {
          console.log(res)
          this.detailFrom = {
            id: res.res.id,
            order: res.res.order,
            url: res.res.url,
            advertType: res.res.advertType,
            advertNo: res.res.advertNo,
            advertLocation: res.res.advertLocation,
            advertContent: res.res.advertContent,
            fileInfoId: res.res.fileInformationResponse.map((item) => {
              return item.id
            }),
            fileList: res.res.fileInformationResponse.map((item) => {
              return { id: item.id, name: item.fileName, url: item.fileUrl }
            })
          }
          console.log(this.detailFrom)
          // console.log('sss', this.$refs)
          this.$refs.edit.idDetail = true
          // this.idDetail = true
        }
      })
    },
    // 删除单条广告
    advertDel(id) {
      advertDel(id)
        .then((res) => {
          console.log(res)
          this.$message.success('删除成功')
          this.fetchData()
        })
        .catch(() => {
          this.$message.error('删除失败')
        })
    },
    // 启用广告
    advertStart(id) {
      advertStart(id)
        .then((res) => {
          console.log(res)
          this.$message.success('操作成功')
          this.fetchData()
        })
        .catch((res) => {
          console.log(res)
          this.$message.error('只能有一个同位置的类型广告开启！')
        })
    },
    // 创建广告
    advertAdd() {
      // console.log('add', this.$refs.add.idDetail)
      this.$refs.add.idDetail = true
      // console.log('add', this.$refs.add.idDetail)
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.fetchData()
    }
  }
}
</script>
